<template>
	<view class="wraps">
		<view class="lists">
			<view class="item" v-if="info">

				<view class="left">
					<view class="">
						名称：{{info.cardName || ''}}
					</view>
					<view class="">
						卡号：{{info.cardNo  || ''}}
					</view>
					<!-- <view class="">
						配送截止时间：2025-12-30
					</view> -->
					<view class="">
						可发货：{{info.maxExchangeCount  || ''}}箱
					</view>
				</view>
				<view class="right">
					<image class="img" :src="info.cardImg" mode=""></image>
					<!-- <view class="dz" @click="addScadule">
						定制发货计划 
						<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
					</view> -->
				</view>
			</view>
		</view>

		<view class="tips">
			<view class="tit">
				温馨说明：
			</view>
			<view class="detail">
				<view class="">
					1、为保证产品品质和时效，提货卡单次提货数量不宜过多
				</view>
				<view class="">2、配置好提货规则后，系统会按您选择的规则创建发货计划</view>
				<view class="">3、创建发货计划后，您可根据实际需要再次调整发货计划</view>
				<view class="">4、更多可咨询客服，服务时间：周一到周日（9:00-22:00）</view>
			</view>
		</view>
		<view class="addr">
			<view class="tit">
				收货信息
			</view>
			<view class="detailaddr">
				<view class="left">
					<image src="../../../static/aidex/images/addr.png" mode=""></image>
					<view class="" @click="chioceAddr">
				
						<view v-if="vuex_checkedAddr" class="">
							<view class="">
								{{vuex_checkedAddr.realname}} {{vuex_checkedAddr.tell}}
							</view>
							<view class="">
								{{vuex_checkedAddr.province}}
								{{vuex_checkedAddr.city}}
								{{vuex_checkedAddr.area}}
								{{vuex_checkedAddr.address}}
							</view>
						</view>
						
						<text v-else>请填写收货信息</text>
						


					</view>
				</view>
				<u-icon name="arrow-right" color="#005850" size="26"></u-icon>
			</view>


		</view>

		<view class="addr">
			<view class="tit">
				发货规则
			</view>
			<view class="detailaddr">
				<view class="left">
					每次发货数量
				</view>
				<view class="right">
					<div @click="getdzq" class="day">
						{{fhsl}}
					</div>个
					<u-picker @confirm="confirm2" mode="selector" v-model="show2" :default-selector="[0]"
						:range="selector2"></u-picker>
				</view>
				<!-- <u-icon name="arrow-right" color="#005850" size="26"></u-icon> -->
			</view>
			<view class="detailaddr">
				<view class="left">
					发货周期
				</view>
				<view class="right">
					每
					<div @click="getday" class="day">
						{{zhouqi}}
					</div>
					天 配送1次
					<u-picker @confirm="confirm" mode="selector" v-model="show" :default-selector="[0]"
						:range="selector"></u-picker>
				</view>
				<!-- <u-icon name="arrow-right" color="#005850" size="26"></u-icon> -->
			</view>

			<view class="detailaddr">
				<view class="left">
					首次发货日期
				</view>
				<view class="right" @click="show1=true">
					<div class="times">
						{{time?time:'选择发货日期'}}
					</div>
					<u-icon name="arrow-right" color="#005850" size="26"></u-icon>
				</view>
				<u-calendar :min-date="minDate" :max-date="maxDate"  active-bg-color="#005850" @change="gettime" v-model="show1" mode="date"></u-calendar>
				<!-- -->
			</view>

			<view class="detailaddr">
				<view class="left">
					总发货次数
				</view>
				<view class="">
					<!-- 1 -->
					{{total}}
					次
				</view>

			</view>

			<u-button @click="creat" class="sub" type="primary" shape="circle" :ripple="true" ripple-bg-color="#909399">
				创建发货计划</u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minDate:'',
				maxDate:'',
				info:null,
				show1: false,
				show2: false,
				zhouqi: '',
				fhsl:'',
				time: "",
				selector: [],
				selector2: [],
				show: false,
				addr: null,

				actionSheetList: [

				],
				cardId: '',
				total:''
				
			}
		},
		onLoad(e) {
			this.cardId = e?.cardId;
			for (let i = 7; i <= 30; i++) {
				this.selector.push(i)
			}
			
		
			
			
			
			
			this.minDate = this.getCurrentDate()
			this.maxDate = this.getDateAfter20Years()

			this.$u.api
				.cardInfo({
					cardId: this.cardId
				})
				.then((res1) => {
					console.log(res1, 88888);
						this.info = res1.info;
						this.total =res1.info?.maxExchangeCount
						
						for (let i = 1; i <= this.info.maxExchangeCount; i++) {
							this.selector2.push(i)
						}
						//  Math.ceil( res1.info?.maxExchangeCount / this.fhsl)
				});
		},
		onShow() {
			this.addr = this.vuex_checkedAddr?.id
			
		},
		methods: {
			
			getDateAfter20Years() {
			    let currentDate = new Date();
			
			    // 获取当前年份并加上20年
			    currentDate.setFullYear(currentDate.getFullYear() + 20);
			
			    // 获取新的年份、月份和日期
			    let year = currentDate.getFullYear();
			    let month = currentDate.getMonth() + 1;  // 月份从0开始，所以加1
			    let day = currentDate.getDate();
			
			    // 格式化日期为 "YYYY-MM-DD"
			    return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			},
			
			 getCurrentDate() {
				  let currentDate = new Date();
				 
				     // 获取当前日期的后一天
				     currentDate.setDate(currentDate.getDate() + 1);
				 
				     // 获取新的年份、月份和日期
				     let year = currentDate.getFullYear();
				     let month = currentDate.getMonth() + 1;  // 月份从0开始，所以加1
				     let day = currentDate.getDate();
				 
				     // 格式化日期为 "YYYY-MM-DD"
				     return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			 },


			chioceAddr() {
				uni.navigateTo({
					url: "/pages/sys/msg/creatAddr?choice="+true
				})
			},
			creat() {
				if (!this.addr) {
					this.$u.toast('请您添加收货地址');
					return
				}
				if (!this.fhsl) {
					this.$u.toast('每次发货数量不能为空');
					return
				}
				if (!this.zhouqi) {
					this.$u.toast('请选择发货周期');
					return
				}
				if (!this.time) {
					this.$u.toast('请选择发货时间');
					return
				}



				this.$u.api.generatePlans({
						"addressId": this.vuex_checkedAddr.id, //选择的地址ID
						"cardId": this.cardId, //卡的ID
						"onceNum": this.fhsl, //每次发货数量  
						"total": this.total, //总发货次数  
						"loopDay":this.zhouqi, //间隔多少天
						"firstDate": this.time+" 00:00:00" //首次发货的日期
					})
					.then((res) => {

						if (res.code == 0) {
							this.$u.toast('计划创建成功!');
							setTimeout(()=>{
								uni.redirectTo({
									url:"/pages/sys/msg/detail?cardId="+this.cardId
								})
							},1500)
							 
							// uni.navigateBack()
							
							
						} else {
							this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
							console.log("请求数据失败");
						}
					});
			},
			gettime(e) {
				this.time = e.result;
				console.log(e.result, 5555);
			},
			confirm(e) {
				console.log(e,55555);
				this.zhouqi =this.selector[e[0]]
			},
			confirm2(e) {
			
				this.fhsl = this.selector2[e[0]]
				
				
				this.total = Math.ceil( this.info?.maxExchangeCount / parseInt(this.fhsl))
				
			},
			getday() {
				this.show = true
			},
			getdzq(){
				this.show2 = true
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			}
		}
	}
</script>

<style scoped>
	page {
		background: #005850;
		padding: 48rpx 35rpx;
	}
</style>

<style scoped lang="scss">
	.sub {
		margin: 50rpx 0 0;
		height: 88rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 42rpx;
	}

	.wraps {
		background: #F7F8F3;
		border-radius: 27rpx;
		padding: 53rpx 58rpx;
	}

	.tips {
		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 28rpx;
			color: #024546;
			line-height: 38rpx;
		}

		.detail {
			padding: 15rpx 0 21rpx;
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 22rpx;
			color: #024546;
			line-height: 31rpx;
			text-align: justify;
		}
	}

	.addr {
		.tit {
			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
			font-weight: normal;
			font-size: 30rpx;
			color: #024546;
			line-height: 42rpx;
			margin-bottom: 17rpx;
		}

		.detailaddr {
			margin-bottom: 17rpx;
			padding: 20rpx 34rpx;
			background: #FFFFFF;
			border-radius: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				flex: 1;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 26rpx;
				color: #005850;
				line-height: 35rpx;
				text-align: left;

				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 22rpx;
				}

				>view {
					flex: 1;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.times {
					margin-right: 20rpx;
					background: #005850;
					border-radius: 12rpx;
					padding: 8rpx 13rpx;
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 35rpx;
				}
			}

			.day {
				min-width: 57rpx;
				height: 36rpx;
				border-radius: 12rpx;
				border: 1rpx solid #005850;
				margin: 0 5px;
				text-align: center;
			}
		}
	}

	.lists {

		.item {
			position: relative;
			height: 270rpx;
			background: url('../../../static/aidex/images/bg.png') no-repeat;
			background-size: cover;
			border-radius: 14rpx;
			margin-bottom: 41rpx;
			display: flex;
			justify-content: space-between;

			.status {
				position: absolute;
				right: 0;
				padding: 2rpx 10rpx 3rpx;
				background: #7F7F7F;
				border-radius: 18rpx 0rpx 0rpx 18rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				top: 25rpx;
				z-index: 5;

				&.doing {
					background: #009585 !important;
				}

				&.over {
					background: #F59A23 !important;
				}
			}

			.left {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 145rpx 0 0 30rpx;
			}

			.right {
				padding-top: 51rpx;
				margin-right: 30rpx;

				.img {
					width: 212rpx;
					height: 187rpx;

				}

				.dz {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					padding: 4rpx 22rpx;
					background: linear-gradient(270deg, #CB9A71 0%, #E6C9A2 100%);
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>
